<template>
  <div>
      <el-button
        @click='add'
      >添加{{title}}</el-button>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="80">
        </el-table-column>
        <el-table-column
          prop="name"
          show-overflow-tooltip
          label="标题"
          width="150">
        </el-table-column>
        <el-table-column
          prop="url"
          show-overflow-tooltip
          label="URL地址"
          width="160">
        </el-table-column>
        <el-table-column
          prop="image"
          label="图片"
          show-overflow-tooltip
          width="160">
        </el-table-column>
        <el-table-column
          label="操作"
          width="110">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="danger" icon="el-icon-delete" circle size="small"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 对话框 -->
      <el-dialog
        title='添加内容'
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="URL地址">
            <el-input v-model="form.url"></el-input>
          </el-form-item>
          <el-form-item label="图片地址">
            <el-input v-model="form.image"></el-input>
          </el-form-item>
           <el-form-item>
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button 
              type="primary"
              @click="onSubmit"
            >确定</el-button>
          </el-form-item>
        </el-form>
        
      </el-dialog>
  </div>
</template>

<script>
export default {
  props:['id','title'],
  data(){
    return{
      tableData:[],
      dialogVisible:false,
      form:{
        name:'',
        url:'',
        image:''
      }
    }
  },
  methods:{
    // 添加
    add(){
      this.dialogVisible = true;
    },
    // 删除
    handleClick(row){
      console.log(row)
      this.$confirm('是否删除，数据不可恢复')
      .then(()=>{
        this.$api.getDeleteContentByIds({id:row.id})
      .then(data=>{
        if(data.status == 200){
          this.$message({
            type:'success',
            message:'删除成功'
          })
          this.getdata(this.id)
        }else{
          this.$message({
            type:'danger',
            message:'删除失败'
          })
        }
      })
      })
      .catch(()=>{
        this.$message({
            type:'info',
            message:'取消删除'
          })
      })
    },
    // 提交
    onSubmit(){
      this.$api.getInsertTbContent({pid:this.id,...this.form})
      .then(data=>{
        if(data.status == 200){
          this.$message({
            type:'success',
            message:'添加成功'
          })
          this.getdata(this.id)
          this.dialogVisible = false
        }else{
          this.$message({
            type:'danger',
            message:'添加失败'
          })
        }
      })
    },
    // 获取数据
    getdata(n){
      this.$api.getSelectTbContentAllByCategoryId({
          id:n
        })
        .then(data=>{
          if(data.status == 200){
            this.tableData = data.data
          }
        })
    }
  },
  watch:{
    id(n){
      if(n){
        this.tableData = [];
        this.getdata(n)
      }
    }
  }
}
</script>

<style>

</style>